<template>
    <el-card class="box-card">
            <!-- 头部 -->
            <div slot="header" class="clearfix">
                <div class="search-header">
                    <span>线上热门搜索</span>
                    <!-- 更多... -->
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <i class="el-icon-more-outline"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div style="height:270px" >
            <!-- 中间部分 -->
                <div class="hot_card">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <!--左侧部分 -->
                            <SearchDetail title="搜索用户数" count="12321">
                                <template v-slot:chart>
                                    <lineChart :chartValue="usersearch" ></lineChart>
                                </template>
                            </SearchDetail>
                        </el-col>
                        <el-col :span="12">
                            <!--右侧部分  -->
                            <SearchDetail title="人均搜索次数" count="2.2">
                                <template v-slot:chart>
                                    <lineChart :chartValue='avgsearch'></lineChart>
                                </template>
                            </SearchDetail>
                        </el-col>
                    </el-row>
                </div>
                <!-- 表格 -->
                <!-- :data="tableData" -->
                <el-table  border style="width: 100%" size="mini"  :default-sort = "{prop: 'date', order: 'descending'}">
                    <el-table-column type="index" label="排名"  width="80">
                    </el-table-column>
                    <el-table-column prop="name" label="搜索关键字"  width="width">
                    </el-table-column>
                    <el-table-column prop="address" label="用户数" sortable width="width">
                    </el-table-column>
                    <el-table-column prop="address" label="周涨幅" sortable width="width">
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <!--  @size-change="handleSizeChange"   -->
                <el-pagination 
                        background
                        style="margin-top: 20px;text-align: right;"
                        :current-page="currentPage"
                        :page-size="limit"
                        layout="prev, pager, next"
                        :total="total"
                        small
                        >
                </el-pagination>
            </div>
    </el-card>
</template>

<script>
import SearchDetail from '@/views/dashboard/FootView/Search/SearchDetail'
import lineChart from '@/views/dashboard/FootView/Search/lineChart'

export default {
    name:'Search',
    components:{
        SearchDetail,
        lineChart
    },
    data() {
        return {
            // 代表的分页器第几页
            currentPage:1,
            // 总数据条数
            total:100,
            // 当前页数展示数据条数
            limit:5,
            //搜索用户可视化数据
            usersearch:[44, 22, 12, 24, 12, 43, 40],
            //人均搜索可视化数据
            avgsearch:[12, 8, 12, 20, 12, 5, 10],
        }
    },
}
</script>

<style scoped>
  .search-header{
     display: flex;
     justify-content:space-between;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>